<script setup lang="ts">
interface Props {
  placeholder?: string;
}

withDefaults(defineProps<Props>(), {
  placeholder: "请输入内容",
});
</script>

<template>
  <div class="umi-textarea">
    <textarea :placeholder="placeholder"></textarea>
    <div class="umi-textarea-length">0/500</div>
  </div>
</template>

<style lang="scss" scoped>
.umi-textarea {
  position: relative;

  > textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  &-length {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #999;
  }
}
</style>
